<template>
  <div class="choose">
    <h3>热门双选会</h3>
    <div class="choose-box">
      <div class="choose-list">
        <div class="choose-item rippleMagic" :class="{ 'isEnd': (v.is_open != 0) }" v-for="v in list" :key="'choose_'+v.id" @click="jumpTo(v)">
          <div class="logo">
            <img :src="v.images" alt="logo">
          </div>
          <div class="wrap">
            <p class="title ellipsis" :title="v.name">{{ v.name }}</p>
            <p class="company ellipsis" :title="v.for_name">主办单位：{{ v.for_name }}</p>
            <p class="little-tips ellipsis">网申截止 {{ v.end_time }}</p>
          </div>
          <div class="corner" :class="[v.type === 1 && 'active']">
            {{
              v.type === 0
                  ? '线上'
                  : '线下'
            }}双选会
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  name: 'choose',
  data () {
    return {
    }
  },
  methods: {
    jumpTo(obj) {
      if(!obj.id){
        this.$alertWarn('未获取到ID，请刷新后再试！');
        return
      }
      if (obj.is_open != 0) {
        this.$alertWarn('该双选会已结束！');
        return;
      }
      let timers = setTimeout(() => {
        this.$router.push({
          path: 'choice',
          query: {
            id: obj.id
          }
        })
        clearTimeout(timers);
        timers = null;
      }, 300);
    }
  }
}
</script>

<style lang="stylus" scoped>
.isEnd {
  background: #ebebeb;
  color: #ccc;
}

.isEnd:hover {
  cursor: not-allowed
}
.choose
  padding 10px 20px 0 20px
  h3
    font-size 20px
    height 70px
    line-height 70px

  .choose-box
    overflow-x scroll

    .choose-list
      display flex
      flex-direction column
      flex-wrap wrap
      height 194px

      .choose-item
        padding 15px 5px 15px 15px
        height 92px
        width 244px
        display flex
        border 1px solid #ebebeb
        border-radius 6px
        overflow hidden
        margin-right 10px
        position relative

        &:nth-child(odd)
          margin-bottom 10px

        .logo
          flex 0 0 64px
          height 64px
          width 64px
          font-size 0
          border-radius 2px
          background #fff

          img
            height 100%

        .wrap
          margin-left 5px
          height 64px
          flex 1
          overflow hidden
          .title
            margin-top 4px
            height 24px
            line-height 24px
            font-size 16px
            color #333
          .company
            height 20px
            line-height 18px
            font-size 12px
            color #999
          .little-tips
            height 16px
            line-height 16px
            font-size 12px
            color #666
            padding-left 8px
            position relative
            &::before
              content: '';
              position absolute
              top 3px
              left 0
              height 10px
              width 2px
              background $color-main

        .corner
          position absolute
          top 0
          right 0
          width 68 * 1.2px
          height 16 * 1.2px
          line-height 16 * 1.2px
          color $color-main
          background rgba(71, 113, 220, 0.3)
          border-bottom-left-radius 6px
          font-size 12px
          text-align center
          transform scale(.83)
          transform-origin top right
          &.active
            color $color-danger
            background rgba(252, 112, 62, 0.3)




</style>
